<template>
  <nm-container id="textSelect">
    <el-row id="ticketTop">
      <el-col :span="4">
        <span class="ticketTxt">{{ currentTime }}</span>
        <span class="ticketTxt">星期{{ week }}</span>
      </el-col>
      <el-col :span="4">
        <span class="ticketTit">现票号：</span>
        <span class="ticketTxt" style="color:#FF0000">{{ numberInfo.currentTicketNum }}</span>
      </el-col>
      <el-col :span="4">
        <span class="ticketTit">剩余票：</span>
        <span class="ticketTxt">{{ numberInfo.remainTicket }}</span>
      </el-col>
      <el-popover id="popover" placement="top-start" title="" width="200" trigger="hover" content="123">
        <div v-html="popoverHtml"></div>
        <el-button slot="reference">键盘快捷按键说明</el-button>
      </el-popover>
    </el-row>

    <el-row id="searchBody">
      <el-col :span="5">
        <span class="stationSpan">上车站</span>
        <el-select class="stcketInput" ref="startNameDoc" v-model="arrList.startStationId" filterable placeholder="请选择">
          <el-option v-for="item in stationList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <span class="stationSpan">日期(F1)</span>
        <el-date-picker
          ref="startDateDoc"
          class="stcketInput"
          v-model="arrList.busDate"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
          @focus="remAdd"
          @blur="addList"
          @change="queryrunbusinfoFun"
          filterable
        >
        </el-date-picker>
      </el-col>

      <el-col :span="5">
        <span class="stationSpan">到达站(F2)</span>
        <el-select
          class="stcketInput"
          clearable
          :filter-method="PinyinMatchFun"
          ref="endNameDoc"
          v-model="arrList.targetCode"
          @focus="remAdd"
          @blur="addList"
          @change="queryrunbusinfoFun"
          filterable
          placeholder="请选择"
        >
          <el-option v-for="item in endList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>
      </el-col>

      <el-col :span="5">
        <span class="stationSpan">时间段(F3)</span>
        <el-select class="stcketInput" clearable ref="selectTimeVal" v-model="selectTimeVal" @change="selectTime" filterable placeholder="请选择">
          <el-option label="全部" value="0"> </el-option>
          <el-option label="00:00 ~ 06:00" value="1"> </el-option>
          <el-option label="06:00 ~ 12:00" value="2"> </el-option>
          <el-option label="12:00 ~ 18:00" value="3"> </el-option>
          <el-option label="18:00 ~ 24:00" value="4"> </el-option>
        </el-select>
        <el-checkbox style="margin-left:20px" v-model="arrList.isAll" @change="ticketAdd">补票</el-checkbox>
      </el-col>
      <el-col :span="4">
        <el-button @click="queryrunbusinfoFun" type="primary">刷新(F10)</el-button>
        <el-button @click="resetData">重置(F11)</el-button>
      </el-col>
    </el-row>

    <el-table
      ref="multipleTabless"
      :max-height="height"
      :data="datalist"
      style="margin-top: 1.5rem;"
      @current-change="handleCurrentChange"
      :row-style="rowStyle"
      @row-dblclick="handledbsupplier"
      @row-click="onRowClick"
    >
      <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
      <el-table-column label="上车站" property="startStationName" align="center"></el-table-column>
      <el-table-column label="车次" property="busNum" align="center"></el-table-column>
      <el-table-column label="到达站" property="targetName" align="center"></el-table-column>
      <el-table-column label="终点站" property="targetName" align="center"></el-table-column>
      <el-table-column label="座位" property="seats" align="center"></el-table-column>
      <!-- <el-table-column label="余座" property="remainSeats" align="center"></el-table-column> -->
      <el-table-column label="余票" property="remainSeats" align="center"></el-table-column>
      <el-table-column label="票价" property="price" align="center"></el-table-column>
      <el-table-column label="发车时间" property="startTime" align="center"></el-table-column>
      <el-table-column label="检票口" property="checkPort" align="center"></el-table-column>
    </el-table>

    <div id="formBody">
      <el-form :inline="true" :model="formInline" class="demo-form-inline2">
        <div>
          <el-form-item label="">
            <span class="stationSpan stationSpanBottom">全价票</span>
            <el-input class="stcketInputBottom" ref="num" @input="calcAllPrice" @focus="selectTxt($event)" @keyup.enter.native="sendSeat(2)" v-model="formInline.num" placeholder=""></el-input>
            <el-checkbox v-model="checkedSeat" @change="seatFun">选座</el-checkbox>
          </el-form-item>
          <el-form-item label="">
            <span class="stationSpan stationSpanBottom">军票</span>
            <el-input class="stcketInputBottom" ref="junInput" @input="calcAllPrice" @focus="selectTxt($event)" @keyup.enter.native="sendSeat(3)" v-model="formInline.junInput"></el-input>
          </el-form-item>
          <el-form-item label="">
            <span class="stationSpan stationSpanBottom">儿童票</span>
            <el-input
              class="stcketInputBottom"
              ref="childInput"
              @input="calcAllPrice"
              @keyup.enter.native="sendSeat(4)"
              @focus="selectTxt($event)"
              v-model="formInline.childInput"
              placeholder=""
            ></el-input>
          </el-form-item>

          <el-form-item label="">
            <span class="stationSpan stationSpanBottom">优惠</span>
            <el-select style="width: 85px" ref="yingInput" class="stcketInput stcketInputBottom" v-model="formInline.yingInput" placeholder="0%">
              <el-option v-for="(x, index) in disrateList" :key="index" :label="x.label" :value="x.value" />
            </el-select>
            <el-input class="styleNum" ref="yingInputNum" v-model="formInline.yingInputNum" @input="calcAllPrice" @keyup.enter.native="sendSeat(5, true)" @focus="selectTxt($event)"></el-input>
          </el-form-item>

          <el-form-item label="">
            <span class="stationSpan stationSpanBottom">保 费</span>
            <el-input class="stcketInputBottom" ref="baoFInput" @focus="selectTxt($event)" v-model="formInline.baoFInput"></el-input>
          </el-form-item>

          <el-form-item label="">
            <span class="stationSpan stationSpanBottom">座位类型</span>
            <el-select
              style="width: 100px"
              ref="banInput"
              filterable
              @focus="changeFocus"
              @blur="changeBlur"
              @keyup.enter.native="nextInput($event, 2)"
              class="stcketInput stcketInputBottom"
              v-model="formInline.seatType"
              placeholder="请选择"
            >
              <el-option v-for="(item, index) in ticketSeatArr" :key="index" :label="item.seat_type_name" :value="item.id" />
            </el-select>
          </el-form-item>

          <el-form-item label="">
            <el-radio-group v-model="formInline.banInput" @change="calcAllPrice">
              <el-radio label="true">购买保险</el-radio>
              <el-radio label="false">不购买保险</el-radio>
            </el-radio-group>
          </el-form-item>
          <div>
            <el-form-item label=" ">
              <span class="priceTitle">找 零：</span>
              <p class="priceTxt">{{ formInline.zhaoInput }}</p>
            </el-form-item>
            <el-form-item>
              <span class="priceTitle">应收款：</span>
              <p class="priceTxt">{{ this.calcPrice ? this.calcPrice : 0 }}</p>
            </el-form-item>
            <el-form-item label="">
              <span class="stationSpan stationSpanBottom">实<span style="margin-left:15px"></span>收</span>
              <el-input class="stcketInputBottom" @focus="selectTxt" v-model="formInline.shiInput" @input="shiInputFun" ref="shiInput" @keyup.enter.native="onlinePay(1)" placeholder=""></el-input>
            </el-form-item>
            <span class="payBtn" @click="onlinePay(1)">现金支付(F6)</span>
            <span class="payBtn" style="margin-left: 20px;" @click="onlinePay(2)">网上支付(F7)</span>
            <!-- 扫码支付Input输入框，用于获取扫描二维码的值 -->
            <el-input v-if="payInput" style="opacity: 1;" v-model="payNum" ref="payNum" @change="handleChangeName"></el-input>
          </div>
        </div>
      </el-form>
    </div>
    <div>
      <el-input v-if="initInput" style="opacity: 0;" ref="initInput"></el-input>
    </div>
    <!-- 身份证模态框 -->
    <el-dialog :before-close="handleClose" :close-on-click-modal="false" title="乘客信息" width="75%" style="margin-left:10%" :visible.sync="dialogFormVisible">
      <el-form>
        <el-row :gutter="20" v-for="(list, index) in userForm" :key="index">
          <el-col :span="3">
            <el-form-item label="证件类型" :label-width="formLabelWidth">
              <el-select style="width:120px" v-model="userForm[index].cardType" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="携童" label-width="110px">
              <el-select style="width:80px" v-model="userForm[index].isChild" placeholder="请选择">
                <el-option label="是" :value="true" />
                <el-option label="否" :value="false" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="票种" label-width="100px">
              <el-select style="width:90px" disabled v-model="userForm[index].ticketType" placeholder="请选择">
                <el-option v-for="(item, index) in ticketTypeList" :key="index" :label="item.ticekt_type_name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="3">
            <el-form-item label="优惠" label-width="50px">
              <el-select style="width:80px" disabled ref="yingInput" class="stcketInput stcketInputBottom" v-model="userForm[index].discountRate" placeholder="0%">
                <el-option v-for="(x,index) in disrateList" :key="index" :label="x.label" :value="x.value" />
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="4">
            <el-form-item label="证件号" label-width="60px">
              <el-input class="cardClass" style="width:180px" v-model="userForm[index].cardId" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="姓名" label-width="110px">
              <el-input style="width:110px" v-model="userForm[index].name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button style="margin-left:60px" type="primary" @click="readCard(index)">读取</el-button>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quick()">一键读取</el-button>
        <el-button @click="userModel(1)">取 消</el-button>
        <el-button type="primary" @click="userData">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 座位号选择 -->
    <el-dialog title="选座" :visible.sync="dialogSeat" width="30%">
      <div id="seatDiv">
        <p
          class="seatItem"
          v-for="(item, index) in seatList"
          :key="index"
          @click="selectStatus(item.seatNum, item.status, index)"
          :class="`${item.status == 0 ? 'selectItem6' : 'noItem'}${selectSeat.indexOf(index) > -1 ? 'selectItem3' : ''}`"
        >
          {{ item.seatNum }}
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="seatOff">取 消</el-button>
        <el-button type="primary" @click="sendSeat(1)">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 支付时等待弹出框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="clearPay">
      <div v-if="payTypeRadioShow" id="payTypeRadioDiv">
        <el-radio-group v-model="payTypeRadio" @change="payTypeRadioChange">
          <el-radio label="4" border>微信</el-radio>
          <el-radio label="5" border>支付宝</el-radio>
        </el-radio-group>
      </div>
      <p v-if="!payTypeRadioShow" id="payText">{{ payText }}</p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="clearPay">取 消</el-button>
      </span>
    </el-dialog>
    <div v-show="show2">
      <div id="runsectioninfo">
        <div id="runsectioninfoOff">F5关闭/开启</div>
        <p class="show2Left show2Title">途径站点</p>
        <p class="show2Right show2Title">金额</p>
        <div v-for="(item, i) in runsectioninfoList" :key="i" class="show2Div">
          <p class="show2Left show2LeftItem">{{ item.targetName }}</p>
          <p class="show2Right show2RightItem">{{ item.price }}</p>
        </div>
      </div>
    </div>

    <save-page :id="curr.id" :visible.sync="dialog.save" @success="refresh" />
  </nm-container>
</template>

<script>
import { mixins } from 'netmodular-ui'
import page from './page'
import cols from './cols'
import SavePage from '../components/save'
import $ from '../../utils/jquery-3.5.1.min'
import { getDateFun } from '../../utils/js/common'

const api = $api.dispatch.env_bus_Info
const stationAPI = $api.dispatch.route_Info

export default {
  name: page.name,
  mixins: [mixins.list],
  components: { SavePage },
  data() {
    return {
      // 打印票号
      printTicketNum: '',
      // 一键读取身份证索引值
      timerIndex: 0,
      // 支付方式选择
      payTypeRadioShow: true,
      payTypeRadio: '',
      calcPrice: 0,
      popoverHtml:
        '<p>\n' +
        'F1：选择日期' +
        '</p>\n' +
        '<p>\n' +
        'F2：选择到达站' +
        '</p>\n' +
        'F3：选择时间段' +
        '</p>\n' +
        'F5：显示/隐藏途径站' +
        '</p>\n' +
        'F6：现金支付购票' +
        '</p>\n' +
        'F7：网上支付' +
        '</p>\n' +
        'F8：输入全票数量' +
        '</p>\n' +
        '</p>\n' +
        'F9：一键读取身份证' +
        '</p>\n' +
        '</p>\n' +
        'F10：刷新列表' +
        '</p>\n' +
        'F11：重置数据' +
        '</p>\n' +
        '选择列表行时按下键盘 → 箭头回到下方全票数输入框' +
        '</p>\n',
      show2: true,
      // 车次列表拷贝数据
      datalistCopy: [],
      // 时间段选择
      selectTimeVal: '0',
      pinyinList: [],
      // 优惠比例数组
      disrateList: [],
      // 选座弹框
      dialogSeat: false,
      // 默认不选座位
      checkedSeat: false,
      // 星期
      week: '',
      // 途径站列表
      runsectioninfoList: [],
      seatList: [],
      payInput: false,
      numberInfo: {},
      // 模态框控制器
      dialogVisible: false,
      payText: '等待乘客支付...',
      //网上支付时获取的扫码数据
      payNum: '',
      radio: '',
      dialogFormVisible: false,
      formLabelWidth: '70px',
      formLabelWidth2: '40px',
      formInline: {
        cardType: '1',
        cardId: '',
        name: '',
        isChild: 'false',
        // ticketType: '1',
        num: '1',
        xieInput: '0',
        banInput: 'true',
        baoFInput: '5',
        yingInput: '',
        shiInput: '0',
        // 应找
        zhaoInput: 0.0,
        price: 0,
        // 优惠数量
        yingInputNum: 0,
        banInputNum: 0,
        halfTicketAmount: '',
        // 军
        junInput: 0,
        // 儿童
        childInput: 0
      },
      options: [
        {
          value: '1',
          label: '身份证'
        },
        {
          value: '2',
          label: '台胞证'
        },
        {
          value: '3',
          label: '港澳通行证'
        },
        {
          value: '4',
          label: '护照'
        },
        {
          value: '5',
          label: '行驶证'
        },
        {
          value: '6',
          label: '其他'
        }
      ],

      userForm: [
        {
          cardType: '1'
        }
      ],
      purchase: '', //公司名称
      purchasecode: '', //公司code
      popupsupplier: false, //弹窗
      datalist: [
        // { code: 'ad00001', company: 'xxxx公司1', username: '张三', userphone: '156********' },
        // { code: 'ad00002', company: 'xxxx公司2', username: '李四', userphone: '156********' },
        // { code: 'ad00003', company: 'xxxx公司3', username: '王二', userphone: '156********' },
        // { code: 'ad00004', company: 'xxxx公司4', username: '麻子', userphone: '156********' },
        // { code: 'ad00005', company: 'xxxx公司5', username: '张三1', userphone: '156********' },
        // { code: 'ad00006', company: 'xxxx公司6', username: '李四1', userphone: '156********' },
        // { code: 'ad00007', company: 'xxxx公司', username: '王二1', userphone: '156********' },
        // { code: 'ad00008', company: 'xxxx公司', username: '麻子1', userphone: '156********' },
        // { code: 'ad00009', company: 'xxxx公司', username: '张三2', userphone: '156********' },
        // { code: 'ad000010', company: 'xxxx公司', username: '李四2', userphone: '156********' },
      ],
      datarow: '', // 当前已选择行
      dataindex: 0, // 当前选择行的index
      refenter: '', //光标移动
      stationList: [],
      endList: [],
      arrList: {
        busDate: getDateFun(),
        ticketCount: 1,
        isAll: false
      },
      list: {
        title: page.title,
        cols,
        action: api.query,
        model: {}
      },
      removeAction: api.remove,
      buttons: page.buttons,
      selectIndex: 1,
      height: 500,
      selectList: {},
      initInput: false,
      timer: '', //定时器的变量
      currentTime: '', // 获取当前时间
      // 选定座位索引
      selectSeat: [],
      // 选定座位
      seatInfo: [],
      ticketTypeList: [],
      ticketSeatArr: []
    }
  },
  created() {
    this.getStation()
    this.targetQuery()
    // 获取当前售票数据
    this.querycurrentuserbillFun()
    this.querySeatList()
    this.queryTypeList()
    this.getdisrateList()
    this.getUserStation()
    const that = this
    this.topTime()
    this.timer = setInterval(function() {
      that.topTime()
    }, 1000)
    document.onkeydown = () => {
      let key = window.event.keyCode
      // 禁用浏览器默认快捷键行为
      switch (key) {
        case 112:
          // 日期聚焦（F1）
          window.event.preventDefault()
          window.event.cancelBubble = true //IE
          this.$refs.startDateDoc.focus()
          this.$refs.endNameDoc.blur()
          break
        case 113:
          // 目的地聚焦（F2）
          window.event.preventDefault()
          window.event.cancelBubble = true //IE
          window.event.preventDefault()
          this.$refs.endNameDoc.focus()
          this.$refs.startDateDoc.blur()
          break
        case 114:
          // 时间段聚焦（F3）
          window.event.preventDefault()
          window.event.cancelBubble = true //IE
          this.$refs.selectTimeVal.focus()
          this.$refs.startDateDoc.blur()
          this.$refs.endNameDoc.blur()
          break
        case 116:
          // 途径站查询（F5）
          window.event.preventDefault()
          window.event.cancelBubble = true //IE
          this.show2 = !this.show2
          break
        case 117:
          // 现金支付（F6）
          window.event.preventDefault()
          window.event.cancelBubble = true //IE
          this.onlinePay(1)
          break
        case 118:
          // 网上支付（F7）
          window.event.preventDefault()
          window.event.cancelBubble = true //IE
          this.onlinePay(2)

          break
        case 119:
          // 到全票下方输入框
          window.event.preventDefault()
          window.event.cancelBubble = true //IE
          this.$refs.num.focus()
          break
        case 27:
          this.showInput()
          break
        case 13:
          window.event.preventDefault()
          window.event.cancelBubble = true //IE
          if (this.dialogFormVisible) {
            if (this.userForm[0].name && this.userForm[0].cardId) {
              this.dialogFormVisible = false
              setTimeout(() => {
                this.$refs.shiInput.focus()
              }, 500)
            }
          }

          break
        case 120:
          // F9一键读取身份证
          if (this.dialogFormVisible) {
            this.quick()
          }
          break
        case 121:
          // F10刷新列表
          window.event.preventDefault()
          window.event.cancelBubble = true //IE
          this.queryrunbusinfoFun()
          break
        case 122:
          // F11重置数据
          window.event.preventDefault()
          window.event.cancelBubble = true //IE
          this.resetData()
          break
        default:
          break
      }
    }
  },
  watch: {
    payNum: function(n) {
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        this.handleChangeName(n)
      }, 1500)
    },
    deep: true
  },
  mounted() {
    try {
      this.$nextTick(() => {
        this.height = window.innerHeight - this.$refs.multipleTabless.$el.offsetTop - 320
      })
    } catch (err) {
      console.log(err)
    }
    // addEventListener('keyup', this.keyUp) //创建监听键盘事件
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  },
  methods: {
    ticketAdd(val) {
      this.arrList.isAll = val
      this.queryrunbusinfoFun()
    },
    payTypeRadioChange(val) {
      this.formInline.payChannel = val
      this.payTypeRadioShow = false
      this.$refs.payNum.focus()
    },
    userInfoModel() {
      if (this.datalist != 0) {
        this.reservation()
        // this.dialogFormVisible = true
      }
    },
    // 时间段筛选
    selectTime(val) {
      if (!val) {
        this.datalist = this.datalistCopy
      }
      if (this.datalistCopy.length > 0) {
        switch (val) {
          case '0':
            this.datalist = this.datalistCopy
            break
          case '1':
            var time = new Array()
            this.datalistCopy.forEach(i => {
              var t = i.startTime.substring(0, 2)
              if (Number(t) >= 0 && Number(t) < 6) {
                time.push(i)
              }
            })
            this.datalist = time
            break
          case '2':
            var time = new Array()
            this.datalistCopy.forEach(i => {
              var t = i.startTime.substring(0, 2)
              if (Number(t) >= 6 && Number(t) < 12) {
                time.push(i)
              }
            })
            this.datalist = time
            break
          case '3':
            var time = new Array()
            this.datalistCopy.forEach(i => {
              var t = i.startTime.substring(0, 2)
              if (Number(t) >= 12 && Number(t) < 18) {
                time.push(i)
              }
            })
            this.datalist = time
            break
          case '4':
            var time = new Array()
            this.datalistCopy.forEach(i => {
              var t = i.startTime.substring(0, 2)
              if (Number(t) >= 18 && Number(t) < 24) {
                time.push(i)
              }
            })
            this.datalist = time
            break
          default:
            break
        }
      }
      this.showInput()
    },
    // 目的站搜索功能
    PinyinMatchFun(val) {
      if (val) {
        let n = parseInt(val)
        let result = new Array()
        if (!isNaN(n)) {
          this.pinyinList.forEach(item => {
            if (item.pinyin.indexOf(val) > -1) result.push(item)
          })
        } else {
          this.pinyinList.forEach(item => {
            if (item.pinyin.indexOf(val.toLowerCase()) > -1) result.push(item)
          })
        }
        this.endList = result
      } else {
        this.endList = this.pinyinList
      }
    },
    // 获取用户当前汽车站
    getUserStation() {
      stationAPI.getstartstation().then(res => {
        this.arrList.startStationId = res[0].id
        this.arrList.startStationName = res[0].name
      })
    },
    // 购票成功后票号+1
    printticketSend() {
      stationAPI.printticket({ count: this.arrList.ticketCount }).then(res => {
        this.querycurrentuserbillFun()
      })
    },
    // 获取途径站信息
    getgetrunsectioninfo() {
      let data = {
        busDate: this.arrList.busDate,
        busNum: this.selectList.busNum
      }
      stationAPI.getrunsectioninfo(data).then(res => {
        this.runsectioninfoList = res
      })
    },
    selectStatus(seat, status, index) {
      this.arrList.ticketCount = Number(this.formInline.num) + Number(this.formInline.junInput) + Number(this.formInline.childInput) + Number(this.formInline.yingInputNum)

      if (status != 0) {
        return
      }
      let arrIndex = this.selectSeat.indexOf(index)
      if (arrIndex > -1) {
        this.selectSeat.splice(arrIndex, 1)
        this.seatInfo.splice(arrIndex, 1)
      } else {
        if (this.arrList.ticketCount == this.selectSeat.length) {
          return
        }
        this.selectSeat.push(index)
        this.seatInfo.push(seat)
      }
    },

    getgetrunbusseatinfo() {
      let data = {
        busDate: this.selectList.startDate,
        busNum: this.selectList.busNum
      }

      stationAPI.getrunbusseatinfo(data).then(res => {
        this.seatList = res
      })
    },
    topTime() {
      let data = new Date()
      let H = data.getHours()
      let Min = data.getMinutes()
      let S = data.getSeconds()
      this.currentTime =  //修改数据date
        `${H < 10 ? '0' + H : H}` + `: ${Min < 10 ? '0' + Min : Min}` + `: ${S < 10 ? '0' + S : S}`
      let arr = ['日', '一', '二', '三', '四', '五', '六']
      this.week = arr[data.getDay()]
    },

    userModel(val) {
      if (val == 1) {
        this.canclelockseatPOST()
      }
      // 如果点击一键读取身份证则清除定时器和数据
      if (this.timerIndex > 0) {
        this.timerIndex = 0
        clearInterval(this.timerCard)
      }
      this.dialogFormVisible = false
      this.addList()
    },

    userData() {
      // let isNum = Number(this.formInline.num) + Number(this.formInline.junInput) + Number(this.formInline.childInput) + Number(this.formInline.yingInputNum)
      // console.log(isNum)

      if (this.userForm[0].name && this.userForm[0].cardId) {
        if (this.seatInfo.length == this.userForm.length) {
          this.userForm.forEach((i, index) => {
            i.seatNum = this.seatInfo[index]
          })
        }
        this.calcAllPrice()
        this.userModel()
        this.$refs.shiInput.focus()
      } else {
        this.$message.warning('请填写身份证信息')
      }
    },
    addList() {
      this.endList = this.pinyinList
      setTimeout(() => {
        addEventListener('keyup', this.keyUp) //创建监听键盘事件
      }, 500)
    },
    remAdd() {
      removeEventListener('keyup', this.keyUp) //关闭键盘事件
    },
    showInput() {
      this.initInput = true
      this.$nextTick(() => {
        this.$refs.initInput.focus()
      })
      setTimeout(() => {
        addEventListener('keyup', this.keyUp) //创建监听键盘事件
      }, 500)
    },
    // 网上支付
    onlinePay(i) {
      this.remAdd()
      if (this.userForm[0].name && this.userForm[0].cardId) {
        if (i == 2) {
          this.payInput = true
          this.formInline.payChannel = '3'
          this.dialogVisible = true
          // this.$nextTick(() => {
          //   this.$refs.payNum.focus()
          // })
        } else {
          // 现金支付
          if (Number(this.formInline.shiInput) >= this.calcPrice) {
            this.formInline.payChannel = '1'
            this.sendTicket()
          } else {
            this.$message.warning('实收金额不能小于应收款')
          }
        }
      } else {
        this.$message.warning('请输入乘客身份证信息')
      }
    },
    handleChangeName(value) {
      if (value === '') {
        return false
      }
      this.sendTicket(value)
    },
    quick() {
      this.timerCard = setInterval(this.readCard, 1000)
    },
    // 读取身份证: index = 索引行，quick = 是否一键读取
    readCard(index) {
      const that = this
      if (that.timerIndex == that.userForm.length) {
        clearInterval(that.timerCard)
        that.timerIndex = 0
        return
      }

      $.ajax({
        type: 'get',
        async: false,
        url: 'http://localhost:5000/Card/ReadIDCard',
        dataType: 'jsonp',
        success: function(json) {
          if (json.Code == 1) {
            // 判断身份证重复
            that.userForm.some(i => {
              if (!json.Data.idCardNo) {
                return
              }
              if (i.cardId == json.Data.idCardNo) {
                if (that.timerIndex < that.userForm.length) {
                  that.timerIndex--
                }
                return true
              }
              that.userForm[index ? index : that.timerIndex].cardId = json.Data.idCardNo
              that.userForm[index ? index : that.timerIndex].name = json.Data.Name
            })
            that.timerIndex++
          } else {
            if (index) {
              that.$message.error('未读取到身份证信息')
            } else {
              clearInterval(that.timerCard)
              that.$message.error(json.Msg)
            }
          }
        },
        error: function(e) {
          clearInterval(that.timerCard)
          that.$message.error('未开启打印机服务')
        }
      })
    },
    // 打印服务
    ticketPrint(res) {
      const that = this
      let d = this.arrList.busDate
      let data = this.selectList
      res.forEach(i => {
        $.ajax({
          type: 'get',
          async: false,
          url: `http://localhost:5000/Print/PrintTicket?Name=${i.passenger_name}&IdCardNo=${i.credential}&ShortDepartureDate=${d.substr(d.length - 5)}&TicketNo=${
            this.printTicketNum
          }&TailNo=${i.paper_ticket_id.substr(i.paper_ticket_id.length - 3)}&DepartureDate=${getDateFun(d)}&DepartureTime=${i.bus_time}&BusId=${i.bus_id}&Price=${i.ticket_price}&OriginatingStation=${
            data.startStationName
          }&Destination=${data.targetName}&SeatNo=${i.seat_no}&Gate=${data.checkPort}`,
          dataType: 'jsonp',
          success: function(json) {
            if (json.Code != 1) {
              that.$message.error(json.Msg)
            }
          },
          error: function(e) {
            that.$message.warning('未开启打印机服务')
          }
        })
      })
    },
    // 选择框聚焦
    changeFocus(e) {
      this.FocusInput = true
    },
    // 选择框失去焦点
    changeBlur(e) {
      this.FocusInput = false
    },
    onRowClick(row) {
      this.selectList = row
    },
    clearPay() {
      this.payTypeRadioShow = true
      this.payTypeRadio = ''
      this.payInput = false
      this.dialogVisible = false
      this.payText = '等待乘客支付...'
      clearTimeout(this.s)
    },
    // 重置乘车人信息
    resetUser() {
      this.userForm = [
        {
          cardType: '1'
        }
      ]
    },
    // 信息重置
    resetData() {
      this.resetUser()
      this.calcPrice = 0
      this.runsectioninfoList = []
      this.checkedSeat = false
      this.arrList = {
        busDate: getDateFun(),
        startStationId: this.arrList.startStationId,
        isAll: false
      }
      this.formInline = {
        cardType: '1',
        cardId: '',
        name: '',
        isChild: 'false',
        num: '1',
        xieInput: '0',
        banInput: 'true',
        baoFInput: '5',
        yingInput: '',
        shiInput: '0',
        // 应找
        zhaoInput: 0.0,
        price: 0,
        // 优惠数量
        yingInputNum: 0,
        banInputNum: 0,
        halfTicketAmount: '',
        // 军
        junInput: 0,
        // 儿童
        childInput: 0
      }
      // 时间段重置
      this.selectTimeVal = '0'
      this.datalist = []
    },
    sendTicket(value) {
      this.payText = '正在支付...'
      var data = {
        runBusId: this.selectList.id,
        targetId: this.arrList.targetCode,
        // 是否购保
        isBuyInsurance: this.formInline.banInput,
        fullTicketAmount: Number(this.formInline.num),
        halfTicketAmount: Number(this.formInline.junInput) + Number(this.formInline.childInput),
        carryChildTicketAmount: this.formInline.xieInput,
        payChannel: this.formInline.payChannel,
        payNum: value ? value : '',
        // ticketNo: this.numberInfo.currentTicketNum,
        passengerInfos: this.userForm
      }
      console.log(this.numberInfo.currentTicketNum)
      // 购票
      stationAPI
        .createorder(data)
        .then(res => {
          // 打印
          this.ticketPrint(res)
          if (this.formInline.payChannel == '1') {
            this.$message({
              message: '购票成功！',
              type: 'success'
            })
            this.printticketSend()
          } else {
            this.payInput = false
            this.dialogVisible = false
            this.payTypeRadioShow = true
            this.payTypeRadio = '4'
            this.payNum = ''
          }
          // 重置页面数据
          this.resetData()
          // 刷新列表、撤销座位
          // this.queryrunbusinfoFun()
        })
        .catch(e => {
          if (this.formInline.payChannel != '1') {
            const that = this
            this.payInput = false
            this.payNum = ''
            this.payText = e
            clearTimeout(this.s)
            this.s = setTimeout(() => {
              that.dialogVisible = false
              that.payTypeRadioShow = true
              that.payTypeRadio = '4'
              that.payText = '等待乘客支付...'
            }, 6000)
          }
        })
    },
    // 选座
    seatFun(val) {
      if (val) {
        if (this.selectList.busNum) {
          this.getgetrunbusseatinfo()
          this.getgetrunbusseatinfo()
          this.showInput()
          this.dialogSeat = true
        } else {
          this.checkedSeat = !this.checkedSeat
          this.$message.warning('请选择班次')
        }
      }
    },
    // 查询优惠比例
    getdisrateList() {
      stationAPI.getdisrate().then(res => {
        res.unshift(0)
        this.disrateList = res.map(i => {
          return { value: i, label: i * 100 + '%' }
        })
      })
    },
    // 解锁锁座
    canclelockseatPOST() {
      stationAPI.canclelockseat().then(res => {
        console.log(res)
      })
    },
    // val == 1 选座确定后锁座 || val == 2 默认锁座
    sendSeat(val, you) {
      if (Number(this.numberInfo.remainTicket) > 0 || Number(this.numberInfo.remainTicket) >= this.arrList.ticketCount) {
        if (this.seatInfo.length == 0 && val == 1) {
          this.$message.warning('请填选择座位号')
          return
        }
        if (this.datalist.length == 0) {
          return
        }
        if (you && this.formInline.yingInput == '' && this.formInline.yingInputNum > 0) {
          this.$message.warning('请选择优惠幅度')
          return
        }

        if (this.dialogFormVisible) {
          return
        }
        this.userInfoModel()
        if (this.showUser == false) {
          return
        }
        let data = {
          busDate: this.arrList.busDate,
          busNum: this.selectList.busNum,
          startStation: this.arrList.startStationId,
          targetName: this.arrList.targetCode,
          fullTicketCount: Number(this.formInline.num),
          childTicketCount: Number(this.formInline.childInput),
          // 军队票数
          armyTicketCount: Number(this.formInline.junInput),
          // 残疾人票数
          deformityTicketCount: 0,
          // 折扣数
          discountTicketCount: Number(this.formInline.num),
          // 折扣率
          discountRate: this.formInline.yingInput == '' ? 0 : this.formInline.yingInput,
          // 座位号
          seats: this.seatInfo
        }
        stationAPI.lockseat(data).then(res => {
          this.$message.success('已锁座')
          if (val > 1) {
            // this.userInfoModel()
            this.dialogFormVisible = true
            return
          }
          this.seatInfo = []
          this.selectSeat = []
          this.dialogSeat = false
        })
      } else {
        this.$message.warning('当前票号余票不足！')
      }
    },
    // 查询票种
    queryTypeList() {
      stationAPI.ticketType().then(res => {
        this.ticketTypeList = res.rows
        this.formInline.halfTicketAmount = res.rows[0].id
      })
    },
    // 查询座位类型
    querySeatList() {
      stationAPI.seatType().then(res => {
        this.ticketSeatArr = res.rows
      })
    },
    // input聚焦选中所有内容
    selectTxt(e) {
      this.remAdd()
      e.currentTarget.select()
    },
    handleClose() {
      this.userModel(1)
    },
    // 聚焦input键盘上键
    upInput(e, n) {
      this.remAdd()
      switch (n) {
        case 5:
          this.$refs.num.focus()
          break
        case 6:
          this.$refs.num.focus()
          break
        case 7:
          this.$refs.xieInput.focus()
          break
        case 8:
          this.$refs.baoInput.focus()
          break

        default:
          break
      }
    },
    // 聚焦input键盘下键
    downInput(e, n) {
      this.remAdd()
      switch (n) {
        case 1:
          this.$refs.yingInput.focus()
          break
        case 3:
          this.$refs.shiInput.focus()
          break
        case 5:
          this.$refs.yingInput.focus()
          break
        default:
          break
      }
    },

    // 聚焦input键盘左键
    leftInput(e, n) {
      switch (n) {
        case 3:
          this.$refs.num.focus()
          break
        case 5:
          this.$refs.xieInput.focus()
          break
        case 6:
          this.$refs.baoFInput.focus()
          break
        case 7:
          this.$refs.yingInput.focus()
          break
        case 8:
          this.$refs.shiInput.focus()
          break

        default:
          break
      }
    },
    // 输入框enter时
    nextInput(e, n) {
      switch (n) {
        case 1:
          this.$refs.xieInput.focus()
          break
        case 3:
          this.$refs.baoFInput.focus()
          break
        case 5:
          this.$refs.yingInput.focus()
          break
        case 6:
          this.$refs.shiInput.focus()
          break

        default:
          break
      }
    },
    // 根据输入的票数展示乘车人身份信息
    reservation() {
      var arr = new Array()
      var li = Number(this.formInline.num)
      var j = Number(this.formInline.junInput)
      var c = Number(this.formInline.childInput)
      var y = Number(this.formInline.yingInputNum)
      var jArr = new Array()
      var cArr = new Array()
      var yArr = new Array()
      try {
        this.showUser = true
        for (var i = 0; i < li; i++) {
          arr.push({
            cardType: '1',
            cardId: '',
            name: '',
            isChild: false,
            ticketType: this.ticketTypeList[0].id,
            seatNum: 0,
            // 优惠
            discountRate: 0
          })
        }
        for (var i = 0; i < j; i++) {
          jArr.push({
            cardType: '1',
            cardId: '',
            name: '',
            isChild: false,
            ticketType: this.ticketTypeList[1].id,
            seatNum: 0,
            // 优惠
            discountRate: 0
          })
        }
        for (var i = 0; i < c; i++) {
          cArr.push({
            cardType: '1',
            cardId: '',
            name: '',
            isChild: false,
            ticketType: this.ticketTypeList[2].id,
            seatNum: 0,
            // 优惠
            discountRate: 0
          })
        }
        for (var i = 0; i < y; i++) {
          yArr.push({
            cardType: '1',
            cardId: '',
            name: '',
            isChild: false,
            ticketType: this.ticketTypeList[3].id,
            seatNum: 0,
            // 优惠
            discountRate: this.formInline.yingInput
          })
        }
      } catch (err) {
        this.$message.error('票种不存在，请先设置票种后再购买！')
        this.showUser = false
      }
      function strLenFun(n) {
        if (n.length == 8) {
          return ''
        } else {
          var strLen = '00000000'
          return strLen.substring(0, 8 - String(n).length)
        }
      }

      if (this.showUser == true) {
        this.userForm = arr
          .concat(jArr)
          .concat(cArr)
          .concat(yArr)
        var numTick = arr
          .concat(jArr)
          .concat(cArr)
          .concat(yArr)
        var nowNum = Number(this.numberInfo.currentTicketNum)
        numTick.forEach(e => {
          e.ticketNo = strLenFun(nowNum) + nowNum++
        })

        // 总人数
        this.arrList.ticketCount = this.userForm.length
      }
    },

    // 查询售票列表
    queryrunbusinfoFun() {
      this.arrList.ticketCount = Number(this.formInline.num) + Number(this.formInline.junInput) + Number(this.formInline.childInput) + Number(this.formInline.yingInputNum)

      // 撤销锁座
      this.canclelockseatPOST()
      this.showInput()
      if (this.arrList.busDate && this.arrList.targetCode) {
        stationAPI.queryrunbusinfo(this.arrList).then(res => {
          if (res.length == 0) {
            this.runsectioninfoList = []
          }
          if (res.length == 0) {
            this.datalist = []
            this.formInline.price = 0
          } else {
            // res[0].price = 10
            this.datalist = res
            this.datalistCopy = res
            this.setCurrent(this.datalist[0])
            this.dataindex = 0
            this.datarow = res[0]
          }
        })
      }
    },
    // 获取当前票号信息
    querycurrentuserbillFun() {
      stationAPI.querycurrentuserbill({ status: 1 }).then(res => {
        if (res.length == 0) {
          this.numberInfo = {
            currentTicketNum: 0,
            remainTicket: 0
          }
        } else {
          this.numberInfo = res[0]
        }
      })
    },
    seatOff() {
      this.checkedSeat = !this.checkedSeat
      this.selectSeat = []
      this.seatInfo = []
      this.dialogSeat = false
    },
    keyUp(e) {
      this.initInput = false
      this.dialogFormVisible = false
      // 表格为空，不监听键盘事件
      if (this.datalist.length == 0) {
        return
      }

      try {
        if (e.keyCode == 40) {
          // 下键
          if (this.dataindex == this.datalist.length - 1) {
            this.dataindex = 0 //当选中的index与数据的天数相等时，在按下键就要返回第一个
            this.datarow = this.datalist[0]
            let height = 47 //计算表格一行的高度，用于出现滚动条的时候，页面展示选中的某一行
            this.$refs.multipleTabless.bodyWrapper.scrollTop = -(height * (this.datalist.length - 6))
          } else {
            if (this.dataindex > 6 && this.dataindex < 14) {
              let height = 65 //计算选中行离表格顶部的距离
              this.$refs.multipleTabless.bodyWrapper.scrollTop = height * (this.dataindex - 6)
            }
            this.dataindex = this.dataindex + 1
            this.datarow = this.datalist[this.dataindex] // 当前已选择行
          }
        } else if (e.keyCode == 38) {
          // 上键
          if (this.dataindex == 0) {
            //当选中的index等于0时，说明到顶了，再按上键就要返回到表格的底部，并计算距离表格顶部的距离
            this.dataindex = this.datalist.length - 1
            this.datarow = this.datalist[this.dataindex] // 当前已选择行
            let height = 47
            this.$refs.multipleTabless.bodyWrapper.scrollTop = height * (this.datalist.length - 6)
          } else {
            this.dataindex = this.dataindex - 1
            this.datarow = this.datalist[this.dataindex]
            let height = 47
            this.$refs.multipleTabless.bodyWrapper.scrollTop += -(height * 1)
          }
        } else if (e.keyCode == 13) {
          removeEventListener('keyup', this.keyUp) //关闭键盘事件

          // 回车锁座成功后弹出乘客信息模态框
          this.sendSeat(2)
        } else if (e.keyCode == 8) {
          // tabel表格选中后回车聚焦页面下方input
          // addEventListener('keyup', this.keyUp) //创建监听键盘事件
        } else if (e.keyCode == 39) {
          // 键盘右键到下输入框
          this.$refs.num.focus()
          this.remAdd()
        }
      } catch (err) {}
      //  else if (e.keyCode == 37) {
      //   //左键赋值给输入框
      //   var row = this.selectedRow
      //   this.purchase = row.company
      //   this.purchasecode = row.code
      //   this.$refs[this.refenter].focus() //光标移动到那个输入框
      //   this.popupsupplier = false //关闭弹窗
      //   removeEventListener('keyup', this.keyUp) //关闭键盘事件
      // }
    },
    //改变表格选中某一行的颜色
    rowStyle(row) {
      if (row.rowIndex == this.dataindex) {
        if (row.row.busNum == this.selectList.busNum) {
          this.getgetrunsectioninfo(row.row.busNum)
        }
        this.selectList = row.row
        this.calcAllPrice()
        this.formInline.price = row.row.price
        return {
          color: '#ffff',
          background: '#158FFF'
        }
      }
    },
    //双击选择某一行
    handledbsupplier(row) {
      this.datarow = this.datalist[5] // 当前已选择行
      // this.rowStyle(row)
      // this.purchase = row.company
      // this.purchasecode = row.code
    },

    // 计算总金额
    calcAllPrice() {
      // let p = this.selectList
      let f = this.formInline
      let ep = Number(this.selectList.price)
      // 应付款
      this.calcPrice =
        Number(f.num) * ep +
        (Number(f.junInput) + Number(f.childInput)) * ep * 0.5 +
        Number(f.yingInputNum) * (ep * Number(f.yingInput)) +
        (this.formInline.banInput == 'true' ? (Number(f.num) + Number(f.junInput) + Number(f.childInput) + Number(f.yingInputNum)) * f.baoFInput : 0)

      if (this.userForm[0].name && this.userForm[0].cardId) {
        this.shiInputFun(Number(f.shiInput))
      }
      // if (this.userForm[0].name && this.userForm[0].cardId) {
      //   let y = () => {
      //     let st = 0
      //     this.userForm.forEach((i) => {
      //       if (i.discountRate > 0) {
      //         st = f.yingInputNum * (ep * i.discountRate)
      //       }
      //       else {
      //         st = f.num * ep
      //       }
      //     })
      //     return st
      //   }
      // this.calcPrice =
      // Number(f.yingInputNum) * (ep * Number(f.yingInput)) +
      // ep * 0.5 * (Number(f.junInput) + Number(f.childInput)) +
      // (this.formInline.banInput == 'true' ? (Number(f.num) + Number(f.junInput) + Number(f.childInput)) * Number(f.baoFInput) : 0)
      // } else {
      //   this.calcPrice =
      //     f.num * ep + ep * 0.5 * (Number(f.junInput) + Number(f.childInput)) + (this.formInline.banInput == 'true' ? (Number(f.num) + Number(f.junInput) + Number(f.childInput) + Number(f.yingInputNum)) * f.baoFInput : 0)
      // }
    },
    shiInputFun(val) {
      if (this.userForm[0].name && this.userForm[0].cardId) {
        this.formInline.zhaoInput = val - this.calcPrice > 0 ? val - this.calcPrice : 0
      } else {
        this.formInline.shiInput = 0
        this.$message.warning('请填写身份证信息后再操作')
      }
    },
    // handleSelectionChange(rows) {
    //   console.log(rows)
    //   this.selectedRow = rows // 保存已选择行
    // },

    setCurrent(row) {
      try {
        this.$refs.multipleTabless.setCurrentRow(row)
      } catch (err) {
        // console.log(err)
      }
    },
    handleCurrentChange(val) {
      // console.log(val)
    },
    // 起始站列表
    getStation() {
      stationAPI.stationQuery().then(res => {
        this.stationList = res.rows.map(i => {
          return { value: i.id, label: i.station_name }
        })
      })
    },
    // 目的地列表
    targetQuery() {
      stationAPI.targetQuery().then(res => {
        this.endList = res.rows
        this.pinyinList = res.rows
      })
    }
  }
}
</script>

<style scoped>
#formBody {
  position: relative;
}
.demo-form-inline2 {
  padding-left: 20px;
  position: fixed;
  bottom: 0;
  height: 150px;
  width: 100%;
  background: white;
  z-index: 99;
  white-space: nowrap;
  display: inline-block;
}
.stcketInput {
  display: inline-block;
  width: 150px;
  border-radius: 0;
}

.stationSpan {
  display: inline-block;
  background: #158fff;
  line-height: 40px;
  color: white;
  padding-left: 10px;
  padding-right: 10px;
}
.stcketInputBottom {
  display: inline-block;
  width: 70px;
  border-radius: 0;
  margin-right: 15px;
}
.stationSpanBottom {
  background: #ebebeb;
  color: black;
  font-size: 15px;
}
.stcketInput .el-input__inner {
  line-height: 100px;
}
#ticketTop {
  line-height: 60px;
  margin-left: 40px;
  border-bottom: 1px solid #ebebeb;
  font-size: 23px;
  white-space: nowrap;
}
.ticketTxt {
  font-weight: bold;
  padding-right: 20px;
}
#searchBody {
  margin-top: 20px;
  margin-left: 40px;
}
.priceTitle {
  font-size: 17px;
  padding-right: 5px;
}
.priceTxt {
  display: inline-block;
  padding-right: 100px;
  font-size: 24px;
  font-weight: bold;
  color: #ff7200;
  width: 30px;
}
#payText {
  text-align: center;
  font-size: 20px;
}
.payBtn {
  display: inline-block;
  width: 160px;
  line-height: 40px;
  background: #158fff;
  color: white;
  font-size: 17px;
  text-align: center;
  cursor: pointer;
}
#seatDiv {
  width: 80%;
  overflow: hidden;
  margin: 0 auto;
}
#textSelect {
  background: #ffff;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.seatItem {
  float: left;
  width: 40px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: chartreuse;
  margin: 2px;
  cursor: default;
}
.selectItem {
  background: blueviolet;
}
.selectItem2 {
  background: teal;
}
.selectItem3 {
  background: peru;
}
.selectItem4 {
  background: violet;
}
.selectItem5 {
  background: olivedrab;
}
.selectItem6 {
  background: mediumturquoise;
  display: inline-block;
}
.noItem {
  background: #4444;
}
#popover {
  position: fixed;
  right: 30px;
  border: none;
}
#runsectioninfoOff {
  font-size: 15px;
  text-align: right;
  margin-right: 8px;
  margin-top: 8px;
}
#runsectioninfo {
  width: 250px;
  height: 200px;
  overflow-y: auto;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 99;
  background: #158fff;
  color: white;
}
.show2Div {
  line-height: 25px;
}
.show2Right {
  float: right;
  padding-right: 30px;
  width: 20%;
  text-align: center;
}
.show2RightItem,
.show2LeftItem {
  font-size: 15px;
}
.show2LeftItem {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.show2Left {
  padding-left: 30px;
  display: inline-block;
  text-align: center;
}
.show2Title {
  font-weight: bold;
  font-size: 18px;
  padding-top: 10px;
  padding-bottom: 8px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.styleNum {
  width: 50px;
}
#payTypeRadioDiv {
  text-align: center;
}
</style>
